<template>
  <div class="page">
      <!-- <button @click="open('success')">显示toast提示框(success)</button>
      <button @click="open('error')">显示toast提示框(error)</button> -->
      <button @click="alert">alert消息</button>
      <button @click="confirm">confirm消息</button>
      <button @click="msgbox">msgbox自定义按钮</button>
      <!-- <button @click="open('info')">显示toast提示框(info)</button> -->
  </div>
</template>

<script>
import msgboxFooter from './footer.vue';
export default {
  data() {
    return {};
  },
  methods: {
    alert(type) {
      this.$rxAlert({ title: "今天没有作业。ououou今天没有作业。ououou今天没有作业。ououou今天没有作业。ououou今天没有作业。ououou今天没有作业。ououou今天没有作业。ououou今天没有作业。ououou今天没有作业。ououou今天没有作业。ououou今天没有作业。ououou今天没有作业。ououou今天没有作业。ououou今天没有作业。ououou今天没有作业。ououou今天没有作业。ououou今天没有作业。ououou今天没有作业。ououou今天没有作业。ououou" }).then(() => {
        alert("点击了确定");
      });
    },
    confirm() {
      this.$rxConfirm({ title: "今天没有作业。<span style='color:#ffab1d'>ououou</span>" })
        .then(() => {
          alert("点击了确定");
        })
        .catch(() => {
          alert("点击了取消");
        });
    },
    msgbox() {
      var template='<div><rx-button @click="$emit(\'resolve\',\'按钮1\')">按钮1</rx-button><rx-button @click="$emit(\'resolve\',\'按钮2\')">按钮2</rx-button><rx-button @click="$emit(\'resolve\',\'按钮3\')">按钮3</rx-button><rx-button plain @click="$emit(\'reject\')">按钮4</rx-button></div>';
      this.$rxMsgbox({
        title: "今天没有作业。ououou",
        footer: {
          template
        },
      }).then(btn => {
          alert("点击了" + JSON.stringify(btn));
        })
        .catch(() => {
          alert("点击了取消");
        });
    }
  }
};
</script>

<style scoped lang="scss">
button {
  display: block;
  margin-bottom: 20px;
}
</style>
